<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>property_assess</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<meta name=viewportcontent="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">-->
    <link rel="stylesheet"  th:href="@{plug-in/element-ui/index.css}"/>
    <link rel="stylesheet" th:href="@{plug-in/my/myStyle.css}"/>
    <script th:src="@{plug-in/vue/vue.js}"></script>
    <script th:src="@{plug-in/vue-resource/vue-resource.js}"></script>
    <script th:src="@{plug-in/element-ui/index.js}"></script>
    <script th:src="@{plug-in/hplus/js/jquery.min.js?v=2.1.4}"></script>
    <script th:src="@{plug-in/my/myutil.js}"></script>
    <script type="text/javascript" th:src="@{plug-in/lhgDialog/lhgdialog.min.js?skin=metrole}"></script>
    <script th:src="@{plug-in/tools/curdtools_zh-cn.js}"></script>

</head>
<body style="background-color: #FFFFFF;">
<div id="propertyAssessList" v-cloak>

    <!--工具条-->
    <div name="searchColums" id="searchColums">
        <el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
            <el-form-item class="el-form-item" label="物业人员">
                <el-input v-model="filters.realname" name="realname" auto-complete="off" placeholder="请输入"></el-input>
            </el-form-item>

            <span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getpropertyAssess">查询</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetForm('filters')">重置</el-button>
			    	</el-form-item>
				</span>
        </el-form>
    </div>



    <!--列表-->
    <el-table :data="propertyAssess" id="datagrid" empty-text=" " height="250" border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange"  @selection-change="selsChange" style="min-width: 100%;">
        <el-table-column prop="index" :formatter="index_formatter" label="序号" min-width="5%"></el-table-column>
        <el-table-column prop="userId" label="物业人员id" min-width="15%"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="realname" label="真实姓名" min-width="15%"  show-overflow-tooltip></el-table-column>
        <!--<el-table-column prop="avatar" label="头像" width="120"  show-overflow-tooltip></el-table-column>-->
        <el-table-column prop="duty" label="职责" min-width="15%"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="pls" label="评论数" min-width="15%"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="dzs" label="点赞数" min-width="15%"  show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" min-width="20%" >
            <template scope="scope">
            <el-button icon="el-icon-search" @click="SearchDetail(scope.$index, scope.row)">查看详情</el-button>
            </template>
        </el-table-column>

    </el-table>

    <!--详情界面-->
    <el-dialog title="详情" width="60%"  :visible.sync="getDetailVisible" :close-on-click-modal="false">
        <el-table :data="detailDataGrid" id="detailDataGrid" empty-text=" " height="250" border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listDetailLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChangeDetail"  style="width: 100%;">
            <el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
            <el-table-column prop="assessUserName" label="评论人" width="100"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="houseName" label="评论人地址" width="120"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="comment" label="评论内容" width="200"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="isPraise" label="点赞情况" width="100"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="assessDate" label="评论时间" width="120"  show-overflow-tooltip></el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar" id="pageDivDetail">
            <el-pagination small background @current-change="handleCurrentChangeDetail" @size-change="handleSizeChangeDetail" :page-sizes="[10, 20, 50, 100]"
                           :page-size="detailpageSize" :total="detailtotal" layout="total,sizes, prev, pager, next"  style="float:right;"></el-pagination>
        </el-col>
    </el-dialog>
        <!--工具条-->
    <el-col :span="24" class="toolbar" id="pageDiv">
        <el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]"
                       :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next"  style="float:right;"></el-pagination>
    </el-col>

</div>
</body>
<script>

    var propertyAssess = '';

    var vue = new Vue({
        el:"#propertyAssessList",
        data() {
            return {
                filters: {
                    realname:'',
                },
                url:{
                    list:'propertyAssess/page',
                    detailList:"propertyAssess/detailPage",
                    queryDict:'systemController.do?typeListJson'
                },
                propertyAssess: [],
                detailDataGrid:[],
                fileList:[],
                total: 0,
                page: 1,
                pageSize:10,
                detailtotal: 0,
                detailpage: 1,
                detailpageSize:10,
                listLoading: false,
                listDetailLoading:false,

                sels: [],//列表选中列
                sort:{
                    sort:"id",
                    order:"asc"
                },
                detailsort:{
                    sort:"id",
                    order:"asc"
                },
                importFormVisible:false,
                editLoading: false,

                getDetailVisible: false,//详情界面是否显示
                propertyId:"",
                addLoading: false,
                addFormRules: {
                },
                //新增界面数据
                addForm: {},

                formFile: {
                },

                //数据字典
                propertyRightOptions:[]
            }
        },
        methods: {
            handleSortChange(sort){
                this.sort={
                    sort:sort.prop,
                    order:sort.order=='ascending'?'asc':'desc'
                };
                this.getpropertyAssess();
            },
            handleSortChangeDetail(sort){
                this.detailsort={
                    sort:sort.prop,
                    order:sort.order=='ascending'?'asc':'desc'
                };
                this.getDetailAssessData();
            },
            handleDownFile(type,filePath){
                var downUrl=this.url.downFile+"?down="+type+"&dbPath="+filePath;
                window.open(downUrl);
            },
            tableRowClassName(row, index) {
                //把每一行的索引放进row
                row.index = row.rowIndex
            },
            headStyle({row, rowIndex}){
                return "table_head_style";
            },
            index_formatter:function(row, column ,cellValue,index) {
                //放回索引值
                return (this.pageSize * (this.page - 1)  + 1+ index);
            },
            formatDate: function(row,column,cellValue, index){
                return !!cellValue?utilFormatDate(new Date(cellValue), 'yyyy-MM-dd'):'';
            },
            formatDateTime: function(row,column,cellValue, index){
                return !!cellValue?utilFormatDate(new Date(cellValue), 'yyyy-MM-dd hh:mm:ss'):'';
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getpropertyAssess();
            },
            handleCurrentChangeDetail(val) {
                this.detailpage = val;
                this.getDetailAssessData();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.page = 1;
                this.getpropertyAssess();
            },
            handleSizeChangeDetail(val) {
                this.detailpageSize = val;
                this.detailpage = 1;
                this.getDetailAssessData();
            },
            resetForm(formName) {
                this.filters= {
                    userId:'',
                }
            },
            //显示详情列表框
            SearchDetail(index,row) {
                this.getDetailVisible=true;
                this.propertyId = row.userId;
                this.getDetailAssessData();

            },
            //获取用户评价详情列表
            getDetailAssessData() {
                let para = {
                    params: {
                        page: this.detailpage,
                        limit: this.detailpageSize,
                        propertyId:this.propertyId
                    }
                };
                this.listDetailLoading = true;
                this.$http.get(this.url.detailList,para).then((res) => {
                    this.detailtotal = res.data.total;
                    this.detailDataGrid=res.data.records;
                    this.listDetailLoading = false;
                });
            },
            //获取用户列表
            getpropertyAssess() {
                let para = {
                    params: {
                        page: this.page,
                        limit: this.pageSize,
                        realname:this.filters.realname
                    }
                };
                this.listLoading = true;
                this.$http.get(this.url.list,para).then((res) => {
                    this.total = res.body.total;
                    var datas=res.body.records;
                    this.propertyAssess = datas;
                    this.listLoading = false;
                });
            },
            //显示详情页面
            getDetail: function () {
                this.getDetailVisible = true;
                this.addForm = {

                };
                this.formFile={
                };
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleSuccess(response, file, fileList){
                if(!response.success){
                    this.$message.error(response.msg);
                }else{
                    this.$message({
                        message: response.msg,
                        type: 'success',
                        duration:1500
                    });
                }
                this.fileList=[];
                this.importFormVisible = false;
                //刷新列表
                this.getpropertyAssess();
            },
            beforeAvatarUpload(file) {
                const isXls = file.type === 'application/vnd.ms-excel';
                const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                if (!isXls&&!isXlsx) {
                    this.$message.error('格式不正确!');
                }

                return isXls||isXlsx;
            },

            //初始化数据字典
            initDictsData:function(){
                this.$http.get("dict/type/log_type").then((res) => {
                    if(res.ok){
                        this.propertyRightOptions = res.body;
                    }
                });
            },
            initDictByCode:function(code,_this,dictOptionsName){
                if(!code || !_this[dictOptionsName] || _this[dictOptionsName].length>0)
                    return;
                this.$http.get(this.url.queryDict,{params: {typeGroupName:code}}).then((res) => {
                    var data=res.data;
                    if(data.success){
                        _this[dictOptionsName] = data.obj;
                        _this[dictOptionsName].splice(0, 1);//去掉请选择
                    }
                });
            }
        },
        mounted() {
            this.initDictsData();
            this.getpropertyAssess();
        }
    });

    function SearchDetail(x){




    };

    function utilFormatDate(date, pattern) {
        pattern = pattern || "yyyy-MM-dd";
        return pattern.replace(/([yMdhsm])(\1*)/g, function ($0) {
            switch ($0.charAt(0)) {
                case 'y': return padding(date.getFullYear(), $0.length);
                case 'M': return padding(date.getMonth() + 1, $0.length);
                case 'd': return padding(date.getDate(), $0.length);
                case 'w': return date.getDay() + 1;
                case 'h': return padding(date.getHours(), $0.length);
                case 'm': return padding(date.getMinutes(), $0.length);
                case 's': return padding(date.getSeconds(), $0.length);
            }
        });
    };
    function padding(s, len) {
        var len = len - (s + '').length;
        for (var i = 0; i < len; i++) { s = '0' + s; }
        return s;
    };
    $(function () {
        autodivheight();
    });

    window.onresize=autodivheight; //浏览器窗口发生变化时同时变化表格高度

</script>
</html>